<template>
  <div class="container">
    <!-- 表格 -->
    <div class="table-box">
      <el-table
        class="two-table"
        border
        :data="data.records"
        style="height: 100%; width: 100%"
      >
        <el-table-column
          label="序号"
          width="80"
          type="index"
          :index="1 + data.pageSize * (data.currentPage - 1)"
          align="center"
        ></el-table-column>
        <el-table-column
          label="名称"
          prop="skuName"
          width="160"
        ></el-table-column>
        <el-table-column
          label="描述"
          prop="skuDesc"
          width="160"
        ></el-table-column>
        <el-table-column label="图片">
          <template #default="scope">
            <img
              :src="scope.row.skuDefaultImg"
              alt=""
              style="width: 100px; height: 100px"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="重量"
          prop="weight"
          width="160"
        ></el-table-column>
        <el-table-column
          label="价格"
          prop="price"
          width="160"
        ></el-table-column>
        <el-table-column label="操作" width="220">
          <template #default="scope">
            <el-button
              size="small"
              :icon="scope.row.isSale === 1 ? 'Bottom' : 'Top'"
              @click="updateSale(scope.row)"
            ></el-button>
            <el-button
              type="primary"
              icon="Edit"
              title="修改SPU"
              size="small"
              @click="updateSku(scope.row)"
            ></el-button>
            <el-button
              type="info"
              icon="View"
              title="查看SKU列表"
              size="small"
              @click="findSku(scope.row)"
            ></el-button>
            <el-popconfirm
              :title="`你确定要删除${scope.row.skuName}`"
              width="200px"
              @confirm="removeSku(scope.row.id)"
            >
              <template #reference>
                <el-button type="danger" size="small" icon="Delete"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="data.currentPage"
        v-model:page-size="data.pageSize"
        :page-sizes="[20, 40, 50, 80]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper,->sizes,total"
        :total="data.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 抽屉查看商品详情信息 -->
    <el-drawer v-model="drawer">
      <template #header>
        <h4>查看商品的详情</h4>
      </template>
      <template #default>
        <el-row style="margin: 10px 0">
          <el-col :span="6">名称</el-col>
          <el-col :span="18">{{ skuInfo.skuName }}</el-col>
        </el-row>
        <el-row style="margin: 10px 0">
          <el-col :span="6">描述</el-col>
          <el-col :span="18">{{ skuInfo.skuDesc }}</el-col>
        </el-row>
        <el-row style="margin: 10px 0">
          <el-col :span="6">价格</el-col>
          <el-col :span="18">{{ skuInfo.price }}</el-col>
        </el-row>
        <el-row style="margin: 10px 0">
          <el-col :span="6">平台属性</el-col>
          <el-col :span="18">
            <el-tag
              style="margin: 5px"
              v-for="item in skuInfo.skuAttrValueList"
              :key="item.id"
            >
              {{ item.valueName }}
            </el-tag>
          </el-col>
        </el-row>
        <el-row style="margin: 10px 0">
          <el-col :span="6">销售属性</el-col>
          <el-col :span="18">
            <el-tag
              style="margin: 5px"
              v-for="item in skuInfo.skuSaleAttrValueList"
              :key="item.id"
            >
              {{ item.saleAttrValueName }}
            </el-tag>
          </el-col>
        </el-row>
        <el-row style="margin: 10px 0">
          <el-col :span="6">商品图片</el-col>
          <el-col :span="18">
            <el-carousel :interval="4000" type="card" height="200px">
              <el-carousel-item
                v-for="item in skuInfo.skuImageList"
                :key="item.id"
              >
                <img
                  :src="item.imgUrl"
                  alt=""
                  style="width: 100%; height: 100%"
                />
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {
  reqSkuList,
  reqCancelSale,
  reqSaleSku,
  reqSkuInfo,
  reqRemoveSku,
} from "../../../api/product/sku/index";
import type {
  SkuResponseData,
  SkuData,
  SkuInfoData,
} from "../../../api/product/sku/type";

const background = ref(true);
const size = ref("default");
const disabled = ref(false);
const data = reactive({
  pageSize: 20,
  currentPage: 1,
  total: 0,
  records: [],
});
let drawer = ref<boolean>(false);
let skuInfo = ref<any>({});

onMounted(() => {
  getHasSku();
});
// 查询sku的数据
const getHasSku = async () => {
  await reqSkuList(data.currentPage, data.pageSize).then(
    (res: SkuResponseData) => {
      if (res.code == 200) {
        data.total = res.data.total as number;
        data.records = res.data.records as [] as [];
      }
    },
  );
};
// 分页事件
//当下拉菜单发生变化的时候触发次方法
//这个自定义事件,分页器组件会将下拉菜单选中数据返回
const handleSizeChange = (val: number) => {
  console.log(`每页 ${val} 条`);
  data.pageSize = val;
  data.currentPage = 1;
  getHasSku();
};

const handleCurrentChange = (val: number) => {
  console.log(`当前页: ${val}`);
  data.currentPage = val;
  getHasSku();
};

// 上下架sku
const updateSale = async (row: SkuData) => {
  if (row.isSale === 1) {
    // 下架操作
    await reqCancelSale(row.id as number);
    ElMessage({
      type: "success",
      message: "下架成功",
    });
    // 发请求获取当前更新完毕的全部己有的SKU
    getHasSku();
  } else {
    // 上架操作
    await reqSaleSku(row.id as number);
    ElMessage({
      type: "success",
      message: "上架成功",
    });
    // 发请求获取当前更新完毕的全部己有的SKU
    getHasSku();
  }
};

// 更新sku
const updateSku = (row: any) => {
  console.log(row);
  ElMessage({ type: "info", message: "程序员在努力的更新中..." });
};

// 查找sku
const findSku = async (row: SkuData) => {
  // 抽屉展示出来
  drawer.value = true;
  // 获取sku的详情
  let res: SkuInfoData = await reqSkuInfo(row.id as number);
  // 赋值 展示数据
  skuInfo.value = res.data;
};

// 删除sku
const removeSku = async (id: number) => {
  let res = await reqRemoveSku(id);
  if (res.code === 200) {
    ElMessage({ type: "success", message: "删除成功" });
    data.currentPage =
      data.records.length > 1 ? data.currentPage : data.currentPage - 1;
    getHasSku();
  } else {
    ElMessage({ type: "error", message: "系统数据不能删除" });
  }
};
</script>

<style scoped lang="scss">
.container {
  height: 100%;
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: var(--el-box-shadow-light); // card阴影
  border-radius: 4px;

  .demo-pagination-block {
    height: 40px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 5px;

    .demo-pagination-block + .demo-pagination-block {
      margin-top: 10px;
    }

    .demo-pagination-block .demonstration {
      margin-bottom: 16px;
    }
  }

  .table-box {
    flex: 1;
    box-sizing: border-box;
    overflow: hidden;
  }
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
